<template>
    <div class="table-container">
        <!-- style="width: 98.6%;" -->
        <el-table :data="tableData" class="custom-table"  header-align="center">
            <el-table-column prop="id" label="序号" width="70" align="center"/>
            <el-table-column prop="name" label="姓名" width="80" />
            <el-table-column prop="tel" label="电话" width="130" />
            <el-table-column prop="player" label="角色" width="80" />
            <el-table-column prop="top" label="上级人员" width="80" />
            <el-table-column prop="soil" label="负责地块" width="140" />
            <el-table-column prop="time" label="最近一次登录系统的时间" width="185" />
            <el-table-column label="操作" width="100">
                <template #default="{ row }">
                    <div class="btns">
                        <el-button type="primary" size="small" style="width: 60px;"
                            @click="emits('look', row)">查看</el-button>
                        <el-button type="primary" size="small" style="width: 60px;margin: 0;"
                            @click="emits('edit', row)"> 编辑 </el-button>
                        <el-button type="danger" size="small" style="width: 60px;margin: 0;"
                            @click="emits('remove', row.id)"> 删除 </el-button>
                    </div>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script lang='ts' setup>
const emits = defineEmits(['remove', 'edit', 'look'])
 defineProps(['tableData'])
</script>

<style lang='scss' scoped>
// 容器样式
.table-container {
    // padding: 20px; // 增加内边距，避免表格贴边
    width: 90%;
    border-radius: 5px;
    height: 83%;
    margin-left: 20px;
}

// 按钮样式
.btns {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

// 表格整体样式
:deep(.custom-table) {
    background: #1D4A56 !important;
    height: 94%;
    
    
}

// 表头样式
:deep(.custom-table .el-table__header-wrapper .el-table__header) {
    background: #1A3F4A !important;
    border-color: #2A6A78 !important;

    // 表头容器（强制覆盖）
    .el-table__header-wrapper {
        background: #1A3F4A !important;
    }

    // 表头单元格样式
    th {
        background: #1D4A56 !important;
        color: #E0E0E0 !important; // 表头文字颜色
        border-color: #2A6A78 !important; // 表头边框颜色
    }
}

// 表格行和单元格样式
:deep(.custom-table .el-table__row .el-table__cell) {
    background: #1D4A56 !important;
    color: #FFFFFF !important; // 表格文字颜色
    border-color: #2A6A78 !important; // 单元格边框颜色
}

// 鼠标悬停行样式
:deep(.custom-table .el-table__row:hover .el-table__cell) {
    background: #255C6A !important; // 悬停时加深背景
}
// 最后一行的底部边框
:deep(.el-table.custom-table .el-table__row:last-child .el-table__cell) {
  border-bottom: none !important;
}
// 表格底部的边框线（关键）
:deep(.el-table.custom-table::before) {
  display: none !important; // 这行最关键，移除表格底部的横线
}
</style>
